<!--
 * @Description: 订单详情页面
 * @Author: lucl
 * @Date: 2021-06-30 14:21:30
 * @LastEditors: lucl
 * @LastEditTime: 2021-07-02 11:04:09
-->
<template>
  <div>
    <!-- 返回按钮 -->
    <div>
      <van-nav-bar
        class="shang"
        title="订单详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <!-- 订单内容 -->
    <div>
      <van-card
        v-for="item in orderLin"
        :key="item.id"
        class="capian"
        :num="item.number"
        :price="item.price"
        :desc="item.product.description"
        :title="item.product.name"
        :thumb="item.product.photo"
      />
    </div>
    <!-- 总计 -->
    <div>
      <div v-show="Alldata.status!=='待接单'" class="zongji">总计：￥{{ this.total }}</div>
    </div>
    <!-- 订单地址 -->
    <div>
      <van-contact-card
      class="lianxiren"
        type="edit"
        :name="Alldata.address.username"
        :tel="Alldata.address.telephone"
        :editable="false"
      />
      <div class="xiadanxinxi">
        <div class="tit">下单信息</div>
        <div class="xinxi">下单时间：{{Alldata.orderTime | time}}</div>
        <div class="xinxi">服务地址：{{Alldata.address.province+Alldata.address.city+Alldata.address.area+Alldata.address.address}}</div>
        <div class="xinxi">服务时间：{{Alldata.serviceTime | time}}</div>
        <van-tag v-if="Alldata.status=='已完成'"  size="large" class="ty" type="success">{{Alldata.status}}</van-tag>
        <van-tag v-else  class="ty" size="large" type="primary">{{Alldata.status}}</van-tag>
      </div>
      <!-- 是否确认接单按钮 -->
      <div>
        <van-submit-bar v-show="Alldata.status==='待接单'" class="bott" :price="this.total*100" button-text="接受订单" @submit="totakeOrder" />
        <!-- <van-button v-show="Alldata.status=='待确认'" @click="toConfirem" type="primary">接受订单</van-button> -->
        <div class="jujue">
        <van-button style="margin-left:75%;" v-show="Alldata.status=='待接单'" @click="toReject" type="warning">拒绝订单</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { findById , takeOrder ,rejectOrder} from "@/api/order";
import { Toast } from 'vant';
import Moment from 'moment'
export default {
  filters:{
    time(value){
      return Moment(value).format('YYYY-MM-DD hh:mm:ss')
    }
  },
  data() {
    return {
      orderId: "",
      orderLin: "",
      total: 0,
      Alldata: {
        address: "",
      },
    };
  },
  computed: {},
  methods: {
    // 拒绝订单
    async toReject(){
      // console.log(1)
      let res = await rejectOrder({orderId:this.orderId})
      this.findAll();
      Toast.fail('拒绝成功');
    },
    // 接受订单
    async totakeOrder(){
      // console.log(2)
      let res =await takeOrder({orderId:this.orderId})
      this.findAll();
      Toast.success('接单成功');
    },
    //   通过id查询订单信息
    async findAll() {
      let a = {
        id: this.orderId,
      };
      let res = await findById(a);
      this.orderLin = res.data.orderLines;
      for (const price in res.data.orderLines) {
        // console.log(key,temp[key]);
        if (res.data.orderLines[price]) {
          this.total += (res.data.orderLines[price].price*res.data.orderLines[price].number);
        }
      }
      this.Alldata = res.data;
      // console.log(res.data.orderLines)
    },
    //   获取订单id
    onClickLeft() {
      this.$router.push({
        path: "/order",
      });
    },
  },
  created() {
    this.orderId = this.$route.query.id;
    //   console.log(this.orderId)
    this.findAll();
  },
  mounted() {},
};
</script>
<style scoped>
.capian {
  margin-top: 20px;
}
.bott{
  margin-bottom: 50px;
}
.jujue{
  width: 100%;
}
/* .jujue >{
  margin-left: 70%;
} */
.zongji {
  margin-top: 10px;
  height: 50px;
  width: 100%;
  text-align: right;
  line-height: 50px;
}
.lianxiren{
    background-color:#FFCC99 ;
    border-radius: 8px;
}
.xinxi{
    margin-top: 10px;
    margin-left: 40px;
    font-size: 13px;
    color: #666633;
}
.xiadanxinxi{
    position: relative;
    background-color: #CCCCCC;
    height: 100%;
}
.ty{
    position:absolute;
    right: 0;
    bottom: 0;
}
.shang{
  height: 60px;
  /* background-color: #CC3399; */
  background-image: linear-gradient(
      to right,
      hsl(329.88, 100%, 50%) 0%,
      hsl(329.2, 100%, 49.81%) 8.1%,
      hsl(327.31, 100%, 49.27%) 15.5%,
      hsl(324.42, 100%, 48.42%) 22.5%,
      hsl(320.75, 100%, 47.31%) 29%,
      hsl(316.42, 100%, 45.97%) 35.3%,
      hsl(311.55, 100%, 44.44%) 41.2%,
      hsl(306.18, 100%, 42.77%) 47.1%,
      hsl(300.39, 100%, 40.99%) 52.9%,
      hsl(294.76, 100%, 42.92%) 58.8%,
      hsl(289.93, 100%, 44.89%) 64.7%,
      hsl(285.89, 100%, 46.6%) 71%,
      hsl(282.63, 100%, 48.02%) 77.5%,
      hsl(280.2, 100%, 49.08%) 84.5%,
      hsl(278.66, 100%, 49.76%) 91.9%,
      hsl(278.12, 100%, 50%) 100%
    );;
}
.tit{
  font-size: large;
  margin-left: 5px;
  color: #666633;
}
</style>